<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <div class="container">
            <table class="table table-bordered table-hover">
                <tr>
                    <td>
                        <!-- v-model[模型] 点击事件 -->
                        <input type="checkbox" v-model="checkAll" @click="selectAll" />
                    </td>
                    <td>
                        商品名称
                    </td>
                    <td>
                        商品价格
                    </td>
                    <td>
                        商品数量
                    </td>
                    <td>
                        商品总额
                    </td>
                    <td>
                        操作
                    </td>
                </tr>
                <!-- 遍历数组[值,索引] -->
                <tr v-for="(item,index) in listInfo">
                    <td>
                        <!-- v-bind:valu[指令] v-model[模型] v-on:change[事件，变化]  -->
                        <input type="checkbox" :value="item.id" v-model="checkItem" @change="selectOne" />
                    </td>
                    <td>{{item.shopName}}</td>
                    <td>{{item.shopPrice}}</td>
                    <td>
                        <!-- 减去商品数量 -->
                        <button class="btn btn-default" @click="reduce(index)">-</button>
                        <input type="text" v-model="item.shopCount" />
                        <!-- 添加商品数量 -->
                        <button class="btn btn-default" @click="add(index)">+</button>
                    </td>
                    <td>
                        {{item.shopPrice*item.shopCount}}
                    </td>
                    <td>
                        <button class="btn btn-warning" @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>
            <p class="text-right">
                金额总计:{{sum}}
            </p>
            <p class="text-right">
                商品数量:{{count}}
            </p>
            <hr />
            <form>
                <div class="form-group">
                    <input class="form-control" placeholder="商品名称" v-model="shopName" />
                </div>
                <div class="form-group">
                    <input class="form-control" placeholder="商品价格" v-model="shopPrice" />
                </div>
                <div class="form-group">
                    <button class="btn btn-primary" type="button" @click="addInfo">增加</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                // listInfo数组，用于存储商品
                listInfo: [{
                    id: 1,
                    shopName: "男装1",
                    shopPrice: 1000,
                    shopCount: 0
                }, {
                    id: 2,
                    shopName: "男装2",
                    shopPrice: 2000,
                    shopCount: 0
                }, {
                    id: 3,
                    shopName: "男装3",
                    shopPrice: 3000,
                    shopCount: 0
                }, {
                    id: 4,
                    shopName: "男装4",
                    shopPrice: 4000,
                    shopCount: 0
                }, {
                    id: 5,
                    shopName: "男装5",
                    shopPrice: 5000,
                    shopCount: 0
                }, ],
                // 输入的商品名
                shopName: "",
                // 输入的商品价格
                shopPrice: "",
                // 空数组用于添加选中的项
                checkItem: [],
                // 用于控制是否全选中
                checkAll: false
            },
            methods: {
                // 添加方法
                add: function(index) {
                    this.listInfo[index].shopCount++

                },
                // 减少方法
                reduce: function(index) {
                    if (this.listInfo[index].shopCount <= 0) {
                        this.listInfo[index].shopCount = 0
                    } else {
                        this.listInfo[index].shopCount--
                    }
                },
                // 移除商品
                del: function(index) {
                    this.listInfo.splice(index, 1)
                },
                // 添加一个商品
                addInfo: function() {
                    // alert(1)
                    var obj = {
                        id: this.listInfo.length + 1,
                        shopName: this.shopName,
                        shopPrice: this.shopPrice,
                        shopCount: 0
                    }
                    console.log(obj)
                    this.listInfo.push(obj)
                },
                // 全选
                selectAll: function() {
                    // 那一次全选都要清空 数组
                    this.checkItem = []
                    if (!this.checkAll) {
                        for (var i = 0; i < this.listInfo.length; i++) {
                            this.checkItem.push(this.listInfo[i].id)
                        }
                    } else {
                        this.checkItem = []
                        this.checkAll = false
                    }
                },
                // 单选
                selectOne() {
                    console.log(this.checkItem)
                    if (this.checkItem.length == this.listInfo.length) {
                        this.checkAll = true
                    } else {
                        this.checkAll = false
                    }
                }
            },
            computed: {
                sum() {
                    var total = 0
                    for (var i = 0; i < this.listInfo.length; i++) {
                        total += parseFloat(this.listInfo[i].shopPrice) * parseFloat(this.listInfo[i].shopCount)
                    }
                    return total
                },
                count: function() {
                    var total = 0
                    for (var i = 0; i < this.listInfo.length; i++) {
                        total += parseInt(this.listInfo[i].shopCount)
                    }
                    return total
                }
            }
        })
    </script>
</body>

</html>